﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>交互</title>
	<script type="text/javascript" src="js/vue2.js"></script>
	<script type="text/javascript" src="js/vue-resource.js"></script>
	<script type="text/javascript">
		window.onload = function(){
			var vm = new Vue({
					el:".bodys",
					data:{},
					methods:{
						get1:function(){
							this.$http.get("js/a.txt").then(function(res){
								console.log(res.data);
							},function(res){
								console.log(res.data);
							});
						},
						get2:function(){
							this.$http.get("js/js.json").then(function(response){
								console.log(response.data.rows);
							},function(response){
								console.log(response.status);
							});
						},
						get3:function(){
							this.$http.post("js/js.json").then(function(response){ //请求的数据为php文件时候，post("js/js.php",{emulateJSON:true})后面有时需要加一个这个
								console.log(response.data.rows.length);
							},function(response){
								console.log(response.status);
							});
						},
						get3:function(){
							this.$http.post("js/js.json").then(function(response){
								console.log(response.data.rows.length);
							},function(response){
								console.log(response.status);
							});
						},
						get4:function(){
							this.$http.jsonp("https://sug.so.360.cn/suggest",
								{
									params: {
									  word:'a'
									},
									jsonp:'callback'
								}).then(function(response){
								console.log(response.data.s);
							},function(response){
								console.log(response.status);
							});
						},
						get5:function(){
							this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
							{              //2.0版本这样写
								params: {
								  wd:'a'
								},
								jsonp:'cb'
							}).then(function(response){
								console.log(response.data.s);
							},function(response){
								console.log(response.status);
							});
						},
						get6:function(){  //除了上面三种形式，这是一种简写形式
							this.$http({
								url:"", //地址
								data:{}, //数据
								methods:{},
								jsonp:"cb" //callback name
							});
						}
					}
			});
		}
	</script>
</head>
<body>
	<div class="bodys">
		<button @click="get1()">按钮1</button>
		<button @click="get2()">按钮2</button>
		<button @click="get3()">按钮3</button>
		<button @click="get4()">按钮4</button>
		<button @click="get5()">按钮5</button>
	</div>
	
</body>
</html>